<template>
  <div></div>
</template>
<script>
import * as THREE from 'three'
export default {
  data() {
    return {}
  },
  mounted() {
    this.threeInit()
  },
  methods: {
    threeInit() {
      //新建一个渲染器
      const renderer = new THREE.WebGLRenderer()
      //设置渲染器的尺寸
      renderer.setSize(window.innerWidth, window.innerHeight)
      //将渲染器添加至dom
      document.body.appendChild(renderer.domElement)
      //新建一个相机
      const camera = new THREE.PerspectiveCamera(
        45,
        window.innerWidth / window.innerHeight,
        1,
        500
      )
      //设置相机位置
      camera.position.set(0, 0, 100)
      camera.lookAt(0, 0, 0)
      const scene = new THREE.Scene()
      const material = new THREE.LineBasicMaterial({ color: 0x0288d1 })
      const points = []
      points.push(new THREE.Vector3(0, 0, 0))
      points.push(new THREE.Vector3(-10, 10, 0))
      points.push(new THREE.Vector3(10, 0, 0))
      points.push(new THREE.Vector3(0, 0, 0))
      const geometry = new THREE.BufferGeometry().setFromPoints(points)
      const line = new THREE.Line(geometry, material)
      scene.add(line)
      renderer.render(scene, camera)
    },
  },
}
</script>
